<template>
  <PageWrapper>
    <div class="p-4 p-4-tag">
      <div class="tag"> 
        <div class="form-box">
          <template v-if="hasPermission('12-2-restart')">
            <Divider orientation="left" plain orientation-margin="10px">系统操作</Divider>
            <div class="flex box-style">
              <a-button type="primary" @click="throttleByRestart" :loading="loadingByRestart">
                重启服务
              </a-button>
            </div>
          </template>
          <template v-if="hasPermission('12-2-obtain')">
            <Divider orientation="left" plain orientation-margin="10px">提取信息</Divider>
            <div class="flex box-style">
              <a-input class="input-style" placeholder="点击按钮获取机器码" v-model:value="infoVal" />
              <a-button type="primary" @click="handleGetInfo" :loading="loadingByCode">
                获取机器码
              </a-button>
            </div>
          </template>

          <!-- <Divider orientation="left" plain>安装授权</Divider>
          <div class="flex box-style">
            <fileWay v-model="modelValue" inputStyle="width: 40%;" @change="handleFile" />
          </div> -->
          <Divider orientation="left" plain orientation-margin="10px">授权信息</Divider>
          <div class="flex box-style table-box">
            <BasicTable @register="registerTable">
              <template #toolbar>
                <a-button type="primary" @click="handleUpdate"> 刷新 </a-button>
              </template>
            </BasicTable>
          </div>
        </div>
      </div>
    </div>
  </PageWrapper>
</template>

<script setup lang="ts">
  import { usePermission } from '/@/hooks/web/usePermission';
  import { PageWrapper } from '/@/components/Page';
  import { Divider } from 'ant-design-vue';
  import { BasicTable, useTable } from '/@/components/Table';
  import { BasicColumn } from '/@/components/Table/src/types/table';
  // import fileWay from '/@/views/project/tag/components/fileWay.vue';
  import { useDebounceFn } from '@vueuse/core';
  import { restartIOTService } from '/@/api/gateway/index';
  import { ref, onMounted, h } from 'vue';
  import { getAuthorization, getMachineCode, downloadAuthorization } from '/@/api/tag/index';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n();
  let infoVal = ref('');
  // let modelValue = ref('');
  const { hasPermission } = usePermission();
  let loadingByCode = ref(false);
  let loadingByRestart = ref(false);
  // 表单数据
  let columns: BasicColumn[] = [
    {
      title: '驱动名',
      dataIndex: 'Name',
    },
    {
      title: '数量',
      dataIndex: 'Number',
    },
    {
      title: '期限',
      dataIndex: 'ExpiryDate',
    },
  ];
  const { createConfirm, createMessage } = useMessage();
  const [registerTable, { reload }] = useTable({
    title: '',
    api: getAuthorization,
    immediate: false,
    columns,
    pagination: false,
    showIndexColumn: false,
    isCanResizeParent: true,
    striped: true,
    bordered: true,
  });
  onMounted(async () => {
    reload();
  });
  async function handleFile(e) {
    if (e.value) {
      try {
        let res = await downloadAuthorization([e.value]);
        if (res) {
          createMessage.success(t('layout.setting.operatingTitle'));
        } else {
          createMessage.warning('操作失败');
        }
      } catch (error) {}
    }
  }
  const throttleByRestart = useDebounceFn(handleRestart, 500);
  async function handleRestart() {
    createConfirm({
      iconType: 'warning',
      okText: '确认',
      title: () => h('span', '温馨提示'),
      content: () => h('span', `是否确认重启服务`),
      onOk: async () => {
        loadingByRestart.value = true;
        try {
          await restartIOTService(['127.0.0.1', '手动重启']);
          createMessage.success('正在重启，请稍后刷新页面');
          loadingByRestart.value = false;
        } catch (error) {
          loadingByRestart.value = false;
        }
      },
    });
  }
  function handleUpdate() {
    reload();
  }
  async function handleGetInfo() {
    loadingByCode.value = true;
    try {
      let res = await getMachineCode();
      infoVal.value = res;
      loadingByCode.value = false;
    } catch (error) {
      loadingByCode.value = false;
    }
  }
</script>
<style scoped lang="less">
  .p-4-tag {
    width: 100%;
    height: 100%;
    padding: 0px !important;
    position: relative;
    .tag {
      position: relative;
      overflow: hidden;
      height: 100%;
      background-color: #fff;
      ::v-deep(.ant-col-14){
        margin: 10px 0;
      }
      .pagination-box {
        z-index: 9;
        padding: 10px 5px;
        box-sizing: border-box;
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #fff;
      }
    }
    .tag::after {
      content: '';
      display: block;
      width: 100%;
      height: 45px;
    }
    .form-box {
      padding: 5px;

      ::v-deep(.ant-form-item) {
        margin: 0 5px;
        margin-bottom: 8px;
      }
    }
    .form-box {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      box-sizing: border-box;
      // background-color: #fff;
      display: flex;
      flex-direction: column;

      .box-style {
        padding: 0 10px;
        box-sizing: border-box;

        .input-style {
          width: 40%;
        }
      }

      .table-box {
        flex: 1;
      }
    }
  }
</style>
